
#container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.box {
    width: 33.3333%;
    height: 50%;
    float: left;
}

.icon {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    height: 100%;
    fill: none;
    stroke-width: 6;
    stroke-linecap: round;
    stroke-linejoin: round;
    cursor: pointer;
}



/******** PALETTES ********/


/*** Faint Grays ***/

/* #b1 { background: #FFFFFF; }
#b2 { background: #F8F8F8; }
#b3 { background: #EFEFEF; }
#b4 { background: #E8E8E8; }
#b5 { background: #DFDFDF; }
#b6 { background: #D8D8D8; }
.icon { stroke: #000000; opacity: .65; } */


/*** Peach ***/

#b1 { background: #fc5c65; }
#b2 { background: #fd9644; }
#b3 { background: #fed330; }
#b4 { background: #eb3b5a; }
#b5 { background: #fa8231; }
#b6 { background: #f7b731; }
.icon { stroke: #FFFFFF; opacity: .95; }


/*** Lime ***/

/* #b1 { background: #76F5A7; }
#b2 { background: #93E87B; }
#b3 { background: #DFE87B; }
#b4 { background: #87FF94; }
#b5 { background: #D1FF93; }
#b6 { background: #FFF687; }
.icon { stroke: #FFFFFF; opacity: 1; } */


/*** Rainbow & Whites ***/

/* #b1 { background: #f1c40f; }
#b2 { background: #1fe0ba; }
#b3 { background: #3ebb2a; }
#b4 { background: #2980b9; }
#b5 { background: #e74c3c; }
#b6 { background: #8e44ad; }
.icon { stroke: #FFFFFF; opacity: .9; } */


/*** Rainbow & Darks ***/

/* #b1 { background: #f1c40f; }
#b2 { background: #1fe0ba; }
#b3 { background: #3ebb2a; }
#b4 { background: #2980b9; }
#b5 { background: #e74c3c; }
#b6 { background: #8e44ad; }
.icon { stroke: #000000; opacity: .5; } */




body {
    align-items: center;
    display: flex;
    height: 100vh;
    justify-content: center;
    margin: 0;
}
svg {
    height: 80px;
    position: absolute;
    width: 80px;
}
.plates {
    display: flex;
    flex-wrap: wrap;
    max-height: 160px;
    width: 640px;
}
@media (max-width: 640px) {
    .plates {
        width: 320px;
    }
}
.plate {
    height: 80px;
    width: 80px;
}
.burger {
    filter: url(#gooeyness);
}
.x {
    transform: scale(0);
    transition: transform 400ms;
}
.line {
    fill: none;
    stroke: black;
    stroke-width: 6px;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform-origin: 50%;
    transition: stroke-dasharray 500ms 200ms, stroke-dashoffset 500ms 200ms, transform 500ms 200ms;
}
.x .line {
    stroke-width: 5.5px;
}
/* First plate */
.plate1 .line2 {
    stroke-dasharray: 40 200;
    stroke-dashoffset: 0px;
}
.plate1 .line3 {
    stroke-dasharray: 40 179;
    stroke-dashoffset: 0px;
}
.active .line {
    transition: stroke-dasharray 500ms, stroke-dashoffset 500ms, transform 500ms;
}
.active.plate1 .line1 {
    transform: scale(0, 1);
    transition: transform 500ms 100ms;
}
.active.plate1 .line2 {
    stroke-dasharray: 5px 200;
    stroke-dashoffset: -164px;
}
.active.plate1 .line3 {
    stroke-dasharray: 5px 179;
    stroke-dashoffset: -142px;
}
.active .x {
    transform: scale(1);
    transition: transform 400ms 350ms;
}
/* El segundo plato */
.plate2 .line1 {
    stroke-dasharray: 21 185.62753295898438;
    transition-delay: 0;
}
.plate2 .line2 {
    stroke-dasharray: 21 178.6514129638672;
    transition-delay: 30ms;
}
.plate2 .line3 {
    stroke-dasharray: 21 197.92425537109375;
    transition-delay: 60ms;
}
.plate2 .line4 {
    stroke-dasharray: 21 190.6597137451172;
    transition-delay: 90ms;
}
.plate2 .line5 {
    stroke-dasharray: 21 208.52874755859375;
    transition-delay: 120ms;
}
.plate2 .line6 {
    stroke-dasharray: 21 186.59703063964844;
    transition-delay: 150ms;
}
.active.plate2 .line1 {
    stroke-dasharray: 5 185.62753295898438;
    stroke-dashoffset: -141px;
}
.active.plate2 .line2 {
    stroke-dasharray: 5 178.6514129638672;
    stroke-dashoffset: -137px;
}
.active.plate2 .line3 {
    stroke-dasharray: 5 197.92425537109375;
    stroke-dashoffset: -176px;
}
.active.plate2 .line4 {
    stroke-dasharray: 5 190.6597137451172;
    stroke-dashoffset: -159px;
}
.active.plate2 .line5 {
    stroke-dasharray: 5 208.52874755859375;
    stroke-dashoffset: -139px;
}
.active.plate2 .line6 {
    stroke-dasharray: 5 186.59703063964844;
    stroke-dashoffset: -176px;
}
.active.plate2 .x {
    transition: transform 400ms 250ms;
}

/* O terceiro prato */
.plate3 .line {
    transition: stroke-dasharray 300ms 200ms, stroke-dashoffset 300ms 200ms, transform 300ms 200ms;
}
.plate3 .line1 {
    stroke-dasharray: 21 109;
}
.plate3 .line2 {
    stroke-dasharray: 21 112;
}
.plate3 .line3 {
    stroke-dasharray: 21 102;
}
.plate3 .line4 {
    stroke-dasharray: 21 103;
}
.plate3 .line5 {
    stroke-dasharray: 21 110;
}
.plate3 .line6 {
    stroke-dasharray: 21 115;
}
.plate3 .x {
    transition: transform 400ms 50ms;
}

.active.plate3 .line {
    transition: stroke-dasharray 400ms, stroke-dashoffset 400ms, transform 400ms;
}
.active.plate3 .line1 {
    stroke-dasharray: 5 109;
    stroke-dashoffset: -95px;
}
.active.plate3 .line2 {
    stroke-dasharray: 5 112;
    stroke-dashoffset: -96px;
}
.active.plate3 .line3 {
    stroke-dasharray: 5 102;
    stroke-dashoffset: -79px;
}
.active.plate3 .line4 {
    stroke-dasharray: 5 103;
    stroke-dashoffset: -78px;
}
.active.plate3 .line5 {
    stroke-dasharray: 5 110;
    stroke-dashoffset: -63px;
}
.active.plate3 .line6 {
    stroke-dasharray: 5 115;
    stroke-dashoffset: -64px;
}
.active.plate3 .x {
    transition: transform 400ms 100ms;
}
/* Die vierte teller */
.plate4 .x {
    transition: transform 400ms;
}
.plate4 .line {
    transform-origin: 50%;
    transition: transform 400ms 100ms;
}
.active.plate4 .line {
    transition: transform 400ms;
}
.active.plate4 .line1 {
    transform: translateX(18px) translateY(-3px) rotate(-45deg) scale(.7);
}
.active.plate4 .line2 {
    transform: translateX(-18px) translateY(-3px) rotate(45deg) scale(.7);
}
.active.plate4 .line3 {
    transform: translateY(0px) rotate(45deg) scale(.7);
}
.active.plate4 .line4 {
    transform: translateY(0px) rotate(-45deg) scale(.7);
}
.active.plate4 .line5 {
    transform: translateX(18px) translateY(3px) rotate(45deg) scale(.7);
}
.active.plate4 .line6 {
    transform: translateX(-18px) translateY(3px) rotate(-45deg) scale(.7);
}
.active.plate4 .x {
    transition: transform 400ms 100ms;
    transform: scale(1);
}
/* Den femte rätten */
.plate5 .line {
    transition: stroke-dasharray 400ms 100ms, stroke-dashoffset 400ms 100ms, transform 400ms 100ms;
}
.plate5 .line1 {
    stroke-dasharray: 40 40;
}
.plate5 .line2 {
    stroke-dasharray: 21 39;
}
.plate5 .line3 {
    stroke-dasharray: 21 39;
}
.plate5 .line4 {
    stroke-dasharray: 40 40;
}
.plate5 .x {
    transition: transform 400ms 50ms;
}

.active.plate5 .line {
    transition: stroke-dasharray 400ms, stroke-dashoffset 400ms, transform 400ms;
}
.active.plate5 .line1 {
    stroke-dasharray: 1 40;
    stroke-dashoffset: -33px;
}
.active.plate5 .line2 {
    stroke-dasharray: 5 39;
    stroke-dashoffset: -37px;
}
.active.plate5 .line3 {
    stroke-dasharray: 5 39;
    stroke-dashoffset: -37px;
}
.active.plate5 .line4 {
    stroke-dasharray: 1 40;
    stroke-dashoffset: -33px;
}
.active.plate5 .x {
    transition: transform 400ms 50ms;
}
/* Шестая пластина */
.plate6 .line {
    transition: stroke-dasharray 400ms 100ms, stroke-dashoffset 400ms 100ms, transform 400ms 100ms;
}
.plate6 .line1 {
    stroke-dasharray: 21 127;
}
.plate6 .line2 {
    stroke-dasharray: 21 106;
}
.plate6 .line3 {
    stroke-dasharray: 21 106;
}
.plate6 .line4 {
    stroke-dasharray: 21 126;
}
.plate6 .x {
    transition: transform 400ms 50ms;
}

.active.plate6 .line {
    transition: stroke-dasharray 400ms, stroke-dashoffset 400ms, transform 400ms;
}
.active.plate6 .line1 {
    stroke-dasharray: 2 127;
    stroke-dashoffset: -94px;
}
.active.plate6 .line2 {
    stroke-dasharray: 2 106;
    stroke-dashoffset: -91px;
}
.active.plate6 .line3 {
    stroke-dasharray: 2 106;
    stroke-dashoffset: -91px;
}
.active.plate6 .line4 {
    stroke-dasharray: 2 127;
    stroke-dashoffset: -94px;
}
.active.plate6 .x {
    transition: transform 400ms 50ms;
}
/* 제 7 판 */
.plate7 .line {
    transition: stroke-dasharray 400ms 100ms, stroke-dashoffset 400ms 100ms, transform 400ms 100ms;
}
.plate7 .line1 {
    stroke-dasharray: 21 102;
}
.plate7 .line2 {
    stroke-dasharray: 21 92;
}
.plate7 .line3 {
    stroke-dasharray: 21 97;
}
.plate7 .line4 {
    stroke-dasharray: 21 97;
}
.plate7 .line5 {
    stroke-dasharray: 21 92;
}
.plate7 .line6 {
    stroke-dasharray: 21 102;
}
.plate7 .x {
    transition: transform 400ms 50ms;
}

.active.plate7 .line {
    transition: stroke-dasharray 400ms, stroke-dashoffset 400ms, transform 400ms;
}
.active.plate7 .line1 {
    stroke-dasharray: 2 102;
    stroke-dashoffset: -102px;
}
.active.plate7 .line2 {
    stroke-dasharray: 2 92;
    stroke-dashoffset: -92px;
}
.active.plate7 .line3 {
    stroke-dasharray: 2 97;
    stroke-dashoffset: -97px;
    transition-delay: 20ms;
}
.active.plate7 .line4 {
    stroke-dasharray: 2 97;
    stroke-dashoffset: -97px;
    transition-delay: 20ms;
}
.active.plate7 .line5 {
    stroke-dasharray: 2 92;
    stroke-dashoffset: -90px;
    transition-delay: 40ms;
}
.active.plate7 .line6 {
    stroke-dasharray: 2 102;
    stroke-dashoffset: -100px;
    transition-delay: 40ms;
}
.active.plate7 .x {
    transition: transform 400ms 50ms;
}
/* Όγδοο πιάτο */
.plate8 .line {
    transition: stroke-dasharray 400ms 100ms, stroke-dashoffset 400ms 100ms, transform 400ms 100ms;
}
.plate8 .line1 {
    stroke-dasharray: 21 201;
}
.plate8 .line2 {
    stroke-dasharray: 21 201;
    transition-delay: 20ms;
}
.plate8 .line3 {
    stroke-dasharray: 21 201;
    transition-delay: 40ms;
}
.plate8 .line4 {
    stroke-dasharray: 21 201;
    transition-delay: 60ms;
}
.plate8 .line5 {
    stroke-dasharray: 21 201;
    transition-delay: 80ms;
}
.plate8 .line6 {
    stroke-dasharray: 21 201;
    transition-delay: 100ms;
}
.plate8 .x {
    transition: transform 400ms 50ms;
}

.active.plate8 .line {
    transition: stroke-dasharray 400ms, stroke-dashoffset 400ms, transform 400ms;
}
.active.plate8 .line1 {
    stroke-dasharray: 5 201;
    stroke-dashoffset: -158px;
}
.active.plate8 .line2 {
    stroke-dasharray: 5 201;
    stroke-dashoffset: -158px;
    transition-delay: 20ms;
}
.active.plate8 .line3 {
    stroke-dasharray: 5 201;
    stroke-dashoffset: -158px;
    transition-delay: 40ms;
}
.active.plate8 .line4 {
    stroke-dasharray: 5 201;
    stroke-dashoffset: -158px;
    transition-delay: 60ms;
}
.active.plate8 .line5 {
    stroke-dasharray: 5 201;
    stroke-dashoffset: -158px;
    transition-delay: 80ms;
}
.active.plate8 .line6 {
    stroke-dasharray: 5 201;
    stroke-dashoffset: -158px;
    transition-delay: 100ms;
}
.active.plate8 .x {
    transition: transform 400ms 50ms;
}